<template>
  <div class="theme-switcher flex items-center space-x-2">
    <span class="text-sm text-gray-600">主题:</span>
    <select
      v-model="currentTheme"
      @change="switchTheme"
      class="bg-white border border-gray-300 text-sm rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
    >
      <option value="default">默认(蓝色)</option>
      <option value="red">红色主题</option>
      <option value="teal">青色主题</option>
    </select>
  </div>
</template>

<script setup lang="ts">
// 定义可用主题
const availableThemes = ['default', 'red', 'teal']

// 当前主题
const currentTheme = ref('default')

// 挂载时检查本地存储的主题
onMounted(() => {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme && availableThemes.includes(savedTheme)) {
    currentTheme.value = savedTheme
    applyTheme(savedTheme)
  }
})

// 应用主题
const applyTheme = (theme: string) => {
  // 从tailwind配置中获取主题颜色
  // 注意：这里我们假设主题已经在CSS变量中定义
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
  console.log(`主题已切换为: ${theme}`)
}

// 切换主题
const switchTheme = () => {
  applyTheme(currentTheme.value)
}
</script>

<style scoped>
.theme-switcher {
  padding: 10px 0;
}
</style>
